import {Component, EventEmitter, Input, Output} from '@angular/core';
import {InputHandler} from '../util/inputhandler';
import {ObjectUtils} from '../util/objectutils';


@Component({
    selector: 'p-dropdown',
    templateUrl: './drop-down.component.html',
    styleUrls: ['./drop-down.component.css'],
    providers: [InputHandler, ObjectUtils]
})
export class DropDownComponent {
    @Input() options: string[] = [];
    optionsToDisplay: string[] = [];
    inputValue: string | undefined;
    confirmValue: string = "";

    @Output() value = new EventEmitter<any>();

    constructor() {
    }

    async onShowSimilar() {
        this.optionsToDisplay = [];
        for (let option of this.options) {
            // @ts-ignore
            if (option.includes(this.inputValue) && this.inputValue != "" && this.inputValue != null) {
                this.optionsToDisplay.push(option);
            }
        }
    }

    activeValue(item: string) {
        this.confirmValue = item;
        this.optionsToDisplay = [];
        this.updateInputValue();
    }

    mouseover(item: string) {
        this.inputValue = item;
    }
    mouseleave() {
        if (this.confirmValue === "") {
            this.inputValue = "";
        } else{
            this.inputValue = this.confirmValue;
        }
        this.optionsToDisplay = [];
    }

    onShowToggle() {
        if (this.optionsToDisplay.length == this.options.length){
            this.optionsToDisplay = [];
        } else {
            this.optionsToDisplay = this.options;
        }
    }
    updateInputValue() {
        this.value.emit(this.confirmValue);
    }
}




